 <template>
  <div class="Train"> 
    <el-row :gutter="10" class="top">
      <el-col :span="7">
        <el-form-item label="搜索 "> 
          <el-input
            size="default"
            placeholder="搜索ID/车次/车长"
            v-model="val"
            @change="() => getlist()"
          />
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="车次类型">
          <el-select
            v-model="type"
            class="m-2"
            placeholder="Select"
            size="default"
            @change="
              () => {
                getlist();
              }
            "
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="状态">
          <el-select
            v-model="state"
            class="m-2"
            placeholder="Select"
            size="default"
            @change="
              () => {
                getlist();
              }
            "
          >
            <el-option
              v-for="item in options1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label=" ">
          <el-button
            size="defalut"
            type="primary"
            @click="() => $router.push('/addline')"
          >
            新增线路 
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <Table @getlist="getlist" :tableData="tableData" />
    <el-pagination
      :page-count="PageCode"
      :current-page="pageSize"
      :page-sizes="[3, 5, 8, 10]"
      small="small"
      :disabled="disabled"
      class="page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import Table from "./components/Table.vue";
import { HttpList } from "api";

export default {
  components: { Table },
  data() {
    return {
      de: null,
      val: "",
      pageCode: 10,
      pageSize: 1,
      total: 1,
      date: "",
      date1: "",
      value1: "",
      tableData: [],
      type: "全部",
      state: "全部",
      options: [
        "全部",
        "高速动车",
        "动车组",
        "城际高速",
        "直达特快",
        "空调特快",
        "快速",
        "普快",
      ],
      options1: ["全部", "停用", "启用"],
    };
  },
  methods: {
    async getlist() {
      const form = {
        val: this.val,
        pageSize: this.pageSize,
        pageCode: this.pageCode,
        type: this.type,
        state: this.state,
        date: this.date,
        date1: this.date1,
      };
      const res = await HttpList({
        ...form,
      });
      
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    ChangeDate(e) {
      this.date = e[0] === "" ? "" : e[0];
      this.date1 = e[1] === "" ? "" : e[1];
      this.getlist();
    },
    handleSizeChange(e) {
      this.pageCode = e;
      this.getlist();
    },
    handleCurrentChange(e) {
      this.pageSize = e;
      this.getlist();
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang='scss' scoped >
.top {
  margin-top: 20px; 
  margin-bottom: 10px;
  a {
    float: left;
    padding-right: 5px;
  }
  .el-input,
  .el-select {
    width: 100%;
    height: 35px; 
  } 
}
.page {
  margin: 20px auto;
  float: right;
}
.Train {
  background-color: white;
  border-radius: 7px;
  padding: 10px 0px 50px 10px;
}
</style> 